
import 'package:flutter/material.dart';
import 'package:flutter_deer/account/iview/recharge_manage_iview.dart';
import 'package:flutter_deer/account/page/recharge_list_page.dart';
import 'package:flutter_deer/account/presenter/recharge_manage_presenter.dart';
import 'package:flutter_deer/account/provider/recharge_manage_provider.dart';
import 'package:flutter_deer/mvp/base_page.dart';
import 'package:flutter_deer/mvp/power_presenter.dart';
import 'package:flutter_deer/res/resources.dart';
import 'package:flutter_deer/routers/fluro_navigator.dart';
import 'package:flutter_deer/util/other_utils.dart';
import 'package:flutter_deer/util/theme_utils.dart';
import 'package:flutter_deer/widgets/my_app_bar.dart';
import 'package:flutter_gen/gen_l10n/deer_localizations.dart';
import 'package:provider/provider.dart';
import '../account_router.dart';

class RechargeManagePage extends StatefulWidget {

  const RechargeManagePage({super.key});

  @override
  _RechargeManagePageState createState() => _RechargeManagePageState();
}

class _RechargeManagePageState extends State<RechargeManagePage> with BasePageMixin<RechargeManagePage, PowerPresenter>, AutomaticKeepAliveClientMixin<RechargeManagePage>,SingleTickerProviderStateMixin implements RechargeManageIMvpView {

  final GlobalKey _bodyKey = GlobalKey();
  TabController? _tabController;
  final PageController _pageController = PageController();
  RechargeManageProvider provider = RechargeManageProvider();
  @override
  bool get wantKeepAlive => false;
  late RechargeManagePresenter rechargeManagePresenter;
  List<RechargeListPage> pageList = [];

  @override
  PowerPresenter<dynamic> createPresenter() {
    final PowerPresenter<dynamic> powerPresenter = PowerPresenter<dynamic>(this);
    rechargeManagePresenter = new RechargeManagePresenter();
    powerPresenter.requestPresenter([rechargeManagePresenter]);
    return powerPresenter;
  }

  @override
  void initState() {
    super.initState();
    pageList = [RechargeListPage(index:0), RechargeListPage(index:1), RechargeListPage(index:2),];
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    final Color? iconColor = ThemeUtils.getIconColor(context);
    double textWidth = 0;
    List<String> titles = [DeerLocalizations.of(context)!.pendingApproval.nullSafe,DeerLocalizations.of(context)!.pass.nullSafe,DeerLocalizations.of(context)!.rejected.nullSafe];
    for(int i=0;i<titles.length;i++){
      TextPainter textPainter = TextPainter(
        text: TextSpan(
          text: titles.elementAt(i),
        ),
        textDirection: TextDirection.ltr,
      );
      textPainter.layout();
      if(textWidth<textPainter.size.width){
        textWidth = textPainter.size.width;
      }
    }
    return ChangeNotifierProvider<RechargeManageProvider>(
        create: (_) => provider,
        child: Scaffold(
          appBar: MyAppBar(
              centerTitle: '${DeerLocalizations.of(context)!.rechargeManagement.nullSafe}',
              actionName: '${DeerLocalizations.of(context)!.recharge.nullSafe}',
              onPressed: () {
                NavigatorUtils.pushResult(
                    context, AccountRouter.addRechargePage, (result) {
                });
              }
          ),
          body: Column(
            key: _bodyKey,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                // 隐藏点击效果
                padding: EdgeInsets.only(left: 0.0,right: 0.0),
                color: context.backgroundColor,
                child: TabBar(
                  onTap: (index) {
                    if (!mounted) {
                      return;
                    }
                    _pageController.jumpToPage(index);
                  },
                  isScrollable: true,
                  controller: _tabController,
                  labelStyle: TextStyles.textBold18,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelPadding: EdgeInsets.zero,
                  unselectedLabelColor: context.isDark ? Colours.text_gray : Colours.text,
                  labelColor: Theme.of(context).primaryColor,
                  indicatorPadding: const EdgeInsets.only(right: 18,left: 18),
                  tabs: <Widget>[
                    _TabView('${DeerLocalizations.of(context)!.pendingApproval.nullSafe}', 0,textWidth),
                    _TabView('${DeerLocalizations.of(context)!.pass.nullSafe}', 1,textWidth),
                    _TabView('${DeerLocalizations.of(context)!.rejected.nullSafe}', 2,textWidth)
                  ],
                ),
              ),
              Gaps.line,
              Expanded(
                child: PageView.builder(
                    key: const Key('pageView'),
                    itemCount: 3,
                    onPageChanged: _onPageChange,
                    controller: _pageController,
                    itemBuilder: (_, int index) => pageList.elementAt(index)
                )
              )
            ]
          ),
        )
    );
  }

  void _onPageChange(int index) {
    if (!mounted) {
      return;
    }
    provider.setIndex(index);
    _tabController?.animateTo(index);
    _pageController.jumpToPage(index);
  }
}

class _TabView extends StatelessWidget {

  const _TabView(this.tabName, this.index,this.maxLabelWidth);

  final String tabName;
  final int index;
  final double maxLabelWidth;

  @override
  Widget build(BuildContext context) {
    if(maxLabelWidth>MediaQuery.of(context).size.width/3-66) {
      return Tab(
          child: Padding(padding: EdgeInsets.only(left: 10, right: 10),
            child: Text(tabName),
          )
      );
    }else{
      return Tab(
        child: SizedBox(
          width: MediaQuery.of(context).size.width/3-36,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(tabName)
            ],
          ),
        ),
      );
    }
  }
}
